<script setup>
import {FButton, FEllipsis, FHeader, FInput, FLayout, FMain, FOption, FSelect, FSpace} from '@fesjs/fes-design'
import {useSearchPageStore} from '../../store/SearchPageStore.js'
import SearchShowView from "./SearchShowView.vue";

const searchPageStore = useSearchPageStore();

</script>

<template>
  <FLayout>
    <FHeader>
      <FSpace>
        <FSelect style="width: 10em" v-model="searchPageStore.searchCondition.searchOptionValue">
          <FOption v-for="(item,index) in searchPageStore.searchCondition.searchOptions" :key="index"
                   :value="item.value">
            <FEllipsis>{{ item.label }}</FEllipsis>
          </FOption>
        </FSelect>
        <FInput style="width: 50em" v-model="searchPageStore.searchCondition.searchValue"></FInput>
        <FButton type="primary" @click="searchPageStore.searchData">查询</FButton>
        <FButton type="text" @click="searchPageStore.reset()">重置</FButton>
      </FSpace>
    </FHeader>
    <FMain style="overflow:auto;">
      <SearchShowView :menu="searchPageStore.menu"
                      :table-data="searchPageStore.tableData"
                      :columns="searchPageStore.columns"
                      :detail-content="searchPageStore.show.detailContent"
                      :page-total-count="searchPageStore.tablePageInfo.pageTotalCount"
                      v-model:current-page="searchPageStore.tablePageInfo.currentPage"
                      v-model:page-size="searchPageStore.tablePageInfo.pageSize"
                      v-model:show-detail="searchPageStore.show.showDetail"
                      @page-change="searchPageStore.pageChange"
                      @open-detail="searchPageStore.openDetail"
                      @select-menu="searchPageStore.selectMenu">

      </SearchShowView>
    </FMain>
  </FLayout>
</template>

<style scoped>

</style>